<!DOCTYPE html >
<html>
<head>
    <link rel="stylesheet" href="demos.css" type="text/css" media="screen" />
    
    <script src="../libraries/RGraph.common.core.js" ></script>
    <script src="../libraries/RGraph.bar.js" ></script>
    <script src="../libraries/RGraph.line.js" ></script>
    <!--[if lt IE 9]><script src="../excanvas/excanvas.js"></script><![endif]-->
    
    <title>A combined bar/line chart</title>
    
    <meta name="description" content="A combined Bar and Line chart" />
</head>
<body>
        
    <h1>A combined bar/line chart</h1>
    
    <p>
        
    </p>

    <canvas id="cvs" width="1000" height="350">[No canvas support]</canvas>

    <script>
        window.onload = function ()
        {
            /**
            * Create the data and colors
            */
            var barData = [];
            var lineData = [];
            var colors = [];
            for (var i=0; i<60; ++i) {
                if (i < 30) {
                    barData[i] = RGraph.random(-100, 0);
                    colors[i] = '#318CBD';
                } else {
                    barData[i] = RGraph.random(0, 100);
                    colors[i] = '#BD3929';
                }
                
                lineData[i] = (((i/60) * 200) - 100) * RGraph.random(0, 10);
            }

            var bar = new RGraph.Bar('cvs', barData)            
            bar.Set('hmargin', 1);
            bar.Set('colors', colors);
            bar.Set('colors.sequential', true);
            bar.Set('xaxispos', 'center');
            bar.Set('background.grid.autofit.numhlines', 10);
            bar.Set('ymax', 100);
            bar.Set('gutter.bottom', 50);
            bar.Set('labels', ['1997', '1998','1999','2000','2001','2002','2003','2004','2005','2006','2007','2008','2009','2010','2011']);
            
            /**
            * Now add the line chart
            */
            var line = new RGraph.Line('cvs', lineData);
            line.Set('colors', ['#FFD600']);
            line.Set('xaxispos', 'center');
            line.Set('linewidth', 2);
            line.Set('shadow', true);
            line.Set('shadow.offsetx', 0);
            line.Set('shadow.offsety', 0);
            line.Set('shadow.blur', 5);
            
            /**
            * Create the combined class
            */
            combo = new RGraph.CombinedChart(bar, line);
            combo.Draw();            
        }
    </script>


    <p>
        <a href="./">&laquo; Back</a>
    </p>

</body>
</html>